<template>
  <div class="history-box-content" :class="[show ? 'show' : '']">
    <div class="history-box">
      <div class="title" @click="close"><img src="@/assets/images/history-icon.png" class="clear-icon wap" alt="">历史记录</div>
      <dl class="list">
        <dd class="dd item" :class="[curId === item.id ? 'text-primary on' : 'text-tx-regular']" v-for="(item, index) in talkList" :key="index" @click="chooseTalk(item.id)">
          <div class="text-line1 name ml-1">{{item.name}}</div>
          <div class="flex-1"></div>
          <div class="flex items-center el-icons">
            <icon name="el-icon-Delete" />
          </div>
        </dd>
      </dl>
      <div class="btns">
        <span class="btn"><img src="@/assets/images/clear.png" class="icon" alt="">清空当前对话</span>
        <span class="btn"><img src="@/assets/images/del.png" class="icon" alt="">删除所有纪录</span>
      </div>
    </div>
    <div class="pup-bg fadeIn" @click="close"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref , computed} from 'vue';
const props = defineProps({
  show:{
    type:Boolean,
    default:false,
  }
})
const shows = computed(() => {
  return props.show
})
const emits = defineEmits(['close'])
const close = () => {
  emits('close')
}
const curId = ref(1);
const talkList = ref([
  {id:1, name:'了解生育津贴政策'},
  {id:2, name:'如何防止两癌'},
  {id:3, name:'新生儿如何养育'},
  {id:4, name:'宝妈可以兼职哪些工作岗位'},
])
</script>

<style lang="scss" scoped>

.pup-bg{width: 100%; height: 100%; position: fixed; left:0; top:0; background-color: rgba(0,0,0,0.5); z-index: var(--zindex1); display: none;}
.history-box{height: 100%; width: 80%;}
.title{ font-weight: bold; width: 96px; height: 37px; border-radius: 8px 8px 0px 0px; background-color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;}
.list{
  background-color: #fff; padding: 16px 0; border-radius: 0px 8px 8px 8px; height: calc(100% - 37px);
  .dd{padding: 0 20px;}
  .item{
    height: 47px; display: flex; align-items: center; cursor:pointer; margin-bottom:4px;
    .icon2{display:none}
    &.on{
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      .icon1{display:none}
      .icon2{display:block}
      .el-icons{visibility: visible; opacity: 1;}
    }
    .name{max-width:calc(100% - 80px)}
    .el-icons{visibility: hidden; opacity: 0;}
  }
}
.btns{
  display: flex; align-items: center; justify-content: space-between; height: 80px; padding:0 var(--web-pad); border-top: 1px solid #E0E0E0;
  .icon{width: 20px; margin-right: 6px;}
  .btn{height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid #EBEBEB; width: 48%;}
}
.clear-icon{margin-right: 8px;}
@media only screen and (max-width: 769px){
  .title{height: 60px; width: auto; justify-content: flex-start; padding-left: 0.16rem; border-radius: 0px; border-bottom: none; font-size:0.28rem;}
  .list{
    padding: 0 0.2rem; border-radius: 0px; height: calc(100% - var(--headerH) - 1.6rem);
    .dd{
      padding:0 0.3rem;border-radius: 0.24rem; height:0.9rem; margin-bottom: 0;
      .name{margin-left: 0; font-size: 0.3rem;}
      .el-icons{display: flex;}
      :deep(.el-icon){font-size: 0.36rem !important; color: #BFBFBF;}
    }
  }
  .history-box{
    position: fixed; right: 0; top: 0; z-index: var(--zindex2); background-color: #fff; transform: translateX(150%); transition: all ease .3s;
  }
  .show{
    .history-box{transform: translateX(0);}
    .pup-bg{display: block;}
  }
  .btns{
    display: flex; align-items: center; justify-content: space-between; height: 1.6rem; padding:0 0.2rem 0.4rem; 
    .icon{width: 0.38rem;}
    .btn{height: 0.68rem; display: flex; align-items: center; justify-content: center; border-radius: 0.4rem; border: 1px solid #EBEBEB; width: 48%; font-weight: bold;}
  }
}

</style>